<template>
  <div class="test">
    <canvas width="400" height="400" ref="cvsRef"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { mapNumToAngle } from "../utils/mapNumToAngle";
export default defineComponent({
  name: "test",
  setup() {
    const cvsRef = ref<HTMLCanvasElement>();
    onMounted(() => {
      const ctx = cvsRef.value?.getContext("2d");
      if (ctx) {
        // ctx.beginPath();
        // ctx.moveTo(10, 200); //起始点
        // var cp1x = 40,
        //   cp1y = 100; //控制点
        // var x = 200,
        //   y = 200; // 结束点
        // //绘制二次贝塞尔曲线
        // ctx.quadraticCurveTo(cp1x, cp1y, x, y);
        // ctx.stroke();

        // ctx.beginPath();
        // ctx.rect(10, 200, 10, 10);
        // ctx.rect(cp1x, cp1y, 10, 10);
        // ctx.rect(x, y, 10, 10);
        // ctx.fill();

        ctx.beginPath();
        ctx.moveTo(40, 200); //起始点
        var cp1x = 20,
          cp1y = 100; //控制点1
        var cp2x = 100,
          cp2y = 120; //控制点2
        var x = 200,
          y = 200; // 结束点
        //绘制二次贝塞尔曲线
        ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
        ctx.stroke();

        ctx.beginPath();
        ctx.rect(40, 200, 10, 10);
        ctx.rect(cp1x, cp1y, 10, 10);
        ctx.rect(cp2x, cp2y, 10, 10);
        ctx.rect(x, y, 10, 10);
        ctx.fill();
      }
    });
    return { cvsRef };
  },
});
</script>
<style scoped>
.test {
  width: 100%;
  height: 100%;
  background-color: #eee;
}
canvas {
  border: 1px solid red;
}
</style>
